import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import path from "path"
import UnoCSS from "unocss/vite"
// 会自动解析哪些api，该库可以对api,进行重命名
import AutoImport from "unplugin-auto-import/vite"
// 会自动解析用了哪些组件
import Components from "unplugin-vue-components/vite"
// 他会去解析,页面用了哪些element-plus,组件
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
// 通过 unplugin-element-plus ⾃动解析导⼊，element-plus 组件 api的样式,不再需要手动导入
// 专为Element Plus设计的插件,自动处理Element Plus组件的样式导入，减少不必要的文件加载。
import ElementPlus from "unplugin-element-plus/vite"

// https://vitejs.dev/config/
export default defineConfig({
  // 路径别名
  resolve: {
    alias: [
      {
        // 给 path.resolve(__dirname, "src")，起别名 @
        find: "@",
        replacement: path.resolve(__dirname, "src")
      }
    ]
  },
  plugins: [
    vue(),
    UnoCSS(),
    AutoImport({
      /*
        1. imports: ["vue", "vue-router", "pinia"] 会自动解析"vue"、"vue-router"、"pinia"的全部api,同时 会生成auto-imports.d.ts,
        2. 会把"vue"、"vue-router"、"pinia"全局变量放进来.
        3. .vue文件不引入对应的api,可以直接用,
        4. 但是eslint 、ts会报错, 需要配置下方eslintrc,
        5. elint会报错, 需要配置eslintrc,
        6. ts会报错, 需要配置 tsconfig.app.json,"types": ["./auto-imports.d.ts", "./components.d.ts"]
      */
      imports: ["vue", "vue-router", "pinia"],
      // 第三方组件库的解析器,会自动解析哪些api,同时 会生成auto-imports.d.ts,会把element-plus 组件当做全局变量放进来
      resolvers: [ElementPlusResolver()],
      /*
        1. 给 eslint 生产的配置
        2. 第一步，eslintrc: { enabled: true }, 保存vite.config.ts
        3. 根目录会生成 .eslintrc-auto-import.json  文件，给eslint，申明全局变量
        4. 第二步，由于只需要操作一次就会生成文件,eslintrc改为: { enabled: false }
        5. 第三步，eslint.config.js 导入 .eslintrc-auto-import.json  文件
        */
      eslintrc: { enabled: false }
    }),
    Components({
      // 会自动解析项目用了哪些element-plus组件,同时 会生成components.d.ts,会把用到的组件写入该文件
      resolvers: [ElementPlusResolver()],
      // 该文件夹下所有的自定义组件可以自动加载,不需要import,去导入
      dirs: [
        "src/components",
        "src/layout/components",
        "src/views/**/components"
      ]
    }),
    // 通过 unplugin-element-plus ⾃动解析导⼊，element-plus 组件 api的样式,不再需要手动导入
    ElementPlus({})
  ],
  // 反向代理
  server: {
    proxy: {
      "/dev-api": {
        target: "http://localhost:3000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/dev-api/, "/api")
      }
    }
  }
})
